<template>
  <el-option :value="value" :label="label" :disabled="disabled" :class="computedClass">
    <slot v-if="slots.default || (selectProps.optionType === 'checkbox' && selectProps.multiple)">
      <div class="check-item">
        <el-checkbox :modelValue="computedChecked"></el-checkbox>
        <div class="text">{{ label }}</div>
      </div>
    </slot>
  </el-option>
</template>
<script setup lang="ts">
import {inject, computed} from 'vue'
type BsOptionProps = {
  value: string | number | boolean | object
  label: string | number
  disabled?: boolean
}

const props = withDefaults(defineProps<BsOptionProps>(), {})
const selectProps:any = inject('selectProps')

const slots = defineSlots<{default:any}>()

const computedChecked = computed(() => {
  return selectProps.modelValue.includes(props.value)
})

const computedClass = computed(() => {
  if (selectProps.optionType === 'checkbox' && selectProps.multiple) {
    return ['checkbox-option']
  }
  return []
})

</script>
<style lang="scss" scoped>
.checkbox-option {
  &::after {
    display: none !important;
  }
}
.check-item {
  display: flex;
  // line-height: 40px;
  // height: 40px;
  align-items: center;
  .text {
    flex: 1;
    margin-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>